<template>
  <div>
    <el-row :gutter="10" type="flex" justify="end">
      <el-col :span="6">
        <el-select v-model="currentYear" size="mini" @change="change">
          <el-option v-for="(item, index) in yearList" :key="index" :label="item" :value="item" />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="currentMonth" size="mini" @change="change">
          <el-option v-for="item in 12" :key="item" :label="item" :value="item" />
        </el-select>
      </el-col>
    </el-row>
    <el-calendar v-model="value">
      <template #deteCell="{date}">
        {{ date.getDate() }} <span v-if="date.getDay() === 6 || date.getDay() === 0" class="current">休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
      yearList: [],
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1
    }
  },
  created() {
    const start = this.currentYear - 5
    const arr = []
    for (let i = 0; i < 10; i++) {
      arr.push(start + i)
    }
    this.yearList = arr
  },
  methods: {
    change() {
      this.value.setFullYear(this.currentYear)
      this.value.setMonth(this.currentMonth - 1)
      const y = this.value.getFullYear()
      const m = this.value.getMonth()
      const d = this.value.getDate()
      this.value = new Date(y, m, d)// 根据旧的日期对象创建一个新的日期对象赋值,触发日历变化
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-calendar__header{
  display: none;
}
// ::v-deep .el-calendar-table td,
// ::v-deep .el-calendar-table tr td:first-child,
// ::v-deep .el-calendar-table tr:first-child td{
//   border:none;
// }

::v-deep td>div{
  text-align: center;
  line-height: 85px;
}

.current{
  background-color: pink;
  display: inline-block;
  width:16px;
  height:16px;
  text-align: center;
  line-height: 16px;
  border-radius: 50%;
  font-size:14px;
  color: #fff;
}
</style>
